<template>
	<view class="common-cardList">
		<uni-grid :column="4" :highlight="true" >
			<uni-grid-item v-for="(item, index) in list" :index="index" :key="index" @click="onChange(item)">
				<view class="grid-item-box" style="background-color: #fff;">
					<!-- <uni-icons type="image" :size="30" color="#777" /> -->
					<image  v-if="item.cover" :src="item.cover" mode=""></image>
					<image  v-else src="../../../static/logo.png" mode=""></image>
					
					<text class="text">{{item.name}}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script setup lang="ts">
	interface Props {
		buttons ?: any
		likes ?: number
	}

	const props = defineProps<Props>()
	import { getList,list } from './hooks.js'
	let onChange=(e)=>{
		console.log(e,'111111111')
	}
	getList()
</script>

<style lang="scss">
	.common-cardList {
		padding: 10rpx 30rpx;
		.grid-item-box {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			border:1px solid #ccc;
			uni-image {
				    width: 90% !important;
				    height: 90% !important;
			}
			.text {
				font-size: 20px;
				line-height: 40px;
				height: 40px;
				padding-left: 10px;
			}
		}
	}
</style>